<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta charset="utf-8" />
  <meta name="renderer" content="webkit" />
  <meta name="keywords" content="" />
  <meta name="description" content="" />
  <meta name="author" content="" />
  <title></title>
  <link href="css/daterangepicker.min.css" rel="stylesheet" />
  <link rel="stylesheet" href="css/main.css" />
  <link rel="stylesheet" href="enterpriseCommon/common.css">
  <link rel="shortcut icon" href="favicon.ico" />
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" />
  <style>
    [v-cloak] {
      display: none;
    }

    .el-select input,
    .half-select input {
      padding-left: 15px;
      height: 40px !important;
    }

    .trade-select {
      float: left;
      width: 280px;
    }

    .trade-select+.trade-select {
      margin-left: 15px;
    }

    .half-select {
      width: 400px;
    }

    #map-container {
      height: 100%;
    }

    .el-upload.el-upload--picture-card,
    .el-upload-list--picture-card .el-upload-list__item {
      border: none;
      width: 104px;
      height: 104px;
    }

  </style>
  <!--[if lt IE 9]>
      <script src="js/html5shiv.min.js"></script>
      <script src="js/respond.min.js"></script>
    <![endif]-->
  <script src="js/vue.js"></script>
</head>

<body>
  <div id="app" v-cloak>
    <header></header>
    <div class="header-space"></div>

    <section class="section521">
      <div class="content">
        <div class="step"><img src="images/icon531-2.png" alt="" /></div>

        <div class="form">
          <div class="tips"><i class="orange">*</i>为必填项，在审核通过后，将无法修改，请确保真实准确</div>
          <div class="item">
            <p>所在行业</p>
            <div class="con">
              <el-select v-model="trade[0]" value-key="id" :disabled="tradeList.length < 1" filterable placeholder="请选择" class="trade-select" @change="clearTrade([1, 2])">
                <el-option v-for="item in tradeList" :key="item.id" :label="item.name" :value="item">
                </el-option>
              </el-select>

              <el-select v-model="trade[1]" value-key="id" :disabled="secTradeList.length < 1" filterable placeholder="请选择" class="trade-select" @change="clearTrade([2])">
                <el-option v-for="item in secTradeList" :key="item.id" :label="item.name" :value="item">
                </el-option>
              </el-select>

              <el-select v-model="trade[2]" value-key="id" :disabled="thrTradeList.length < 1" filterable placeholder="请选择" class="trade-select">
                <el-option v-for="item in thrTradeList" :key=" item.id" :label="item.name" :value="item">
                </el-option>
              </el-select>
              <!-- <select name="" id="" class="w280">
                  <option value="">请选择1</option>
                  <option value="">请选择2</option>
                  <option value="">请选择3</option>
                </select>
                <select name="" id="" class="w280">
                  <option value="">请选择1</option>
                  <option value="">请选择2</option>
                  <option value="">请选择3</option>
                </select>
                <select name="" id="" class="w280">
                  <option value="">请选择1</option>
                  <option value="">请选择2</option>
                  <option value="">请选择3</option>
                </select> -->
            </div>
          </div>
          <div class="item">
            <p><i class="red">*</i>企业名称</p>
            <div class="con">
              <input v-model="name" type="text" placeholder="请输入公司全称" class="input" />
              <p class="tips">
                公司全称与营业执照名称/劳动合同名称/公司发票抬头保持一致,
              </p>
            </div>
          </div>
          <div class="item w400">
            <p><i class="red">*</i>企业性质</p>
            <div class="con">
              <el-select v-model="type_id" placeholder="请选择企业性质" class="half-select">
                <el-option v-for="item in typeList" :key="item.id" :label="item.name" :value="item.id">
                </el-option>
              </el-select>
            </div>
          </div>
          <div class="item w400 r">
            <p><i class="red">*</i>企业规模</p>
            <div class="con">
              <el-select v-model="size_id" placeholder="请选择企业规模" class="half-select">
                <el-option v-for="item in sizeList" :key="item.id" :label="item.name" :value="item.id">
                </el-option>
              </el-select>
            </div>
          </div>
          <div class="item w400">
            <p><i class="red">*</i>企业所在地</p>
            <div class="con">
              <el-cascader v-model="area_id" :options="areaList" :props="{
								value: 'id',
								label: 'region_name',
								children: 'children'
							}" class="half-select" @change="setCity" ref="cascader"></el-cascader>
            </div>
          </div>
          <div class="item w400 r">
            <p><i class="red">*</i>详细地址</p>
            <div class="con">
              <input v-model="address" type="text" placeholder="请输入公司详细地址（可自动获取地图上的位置）" class="input" />
            </div>
          </div>
          <div class="map-box">
            <div id="map-container"></div>
            <div class="map-operate">
              <input id="keyword-input" v-model="mapAddress" type="text" placeholder="关键词搜索" class="input search-on" />
              <input type="submit" value="保存" class="btn" @click="saveAddress" />
              <div id="address-output" class="search-tips show">
                <!-- <a href="">海淀文教产业园（东门）</a>
                <a href="">海淀文教产业园（东门）</a>
                <a href="">海淀文教产业园（东门）</a>
                <a href="">海淀文教产业园（东门）</a>
                <a href="">海淀文教产业园（东门）</a> -->
              </div>
            </div>
          </div>

          <div class="item">
            <p>
              营业资质
              <small>支持格式：jpg、jpeg、gf、png，小于 10 MB</small>
            </p>
            <div class="upload-box">
              <el-upload key="ava-key" :show-file-list="false" :before-upload="checkImg" :http-request="uploadImg" accept=".jpg,.jpeg,.png,.gif,.JPG,.JPEG" class="avatar-uploader" action="">

                <div v-if="qualificationSrc" class="img">
                  <img :src="qualificationSrc|imgFilter" alt="" class="item-img">
                </div>
                <div v-else class="upload">
                  <span>上传照片</span>
                </div>
              </el-upload>
            </div>
          </div>
          <div class="item">
            <p>
              企业荣誉及工作环境
              <small>支持格式：jpg、jpeg、gf、png，小于 10 MB</small>
            </p>
            <div class="upload-box">
              <el-upload :before-upload="checkImg" :http-request="uploadImg" accept=".jpg,.jpeg,.png,.gif,.JPG,.JPEG" :auto-upload="false" multiple :limit="6" list-type="picture-card" class="avatar-uploader" ref="EnterpriseImg" action="" :on-change="checkImg" :on-exceed="showLimitOutMsg">
                <div slot="default" class="upload">
                  <span style="line-height: 1;">上传照片</span>
                </div>
              </el-upload>
            </div>
          </div>
          <div class="item">
            <p>企业介绍</p>
            <div class="con">
              <textarea v-model="desc" name="" placeholder="请详细描述您的公司情况，以便平台审核人员更好的了解公司" id="" cols="30" rows="10"></textarea>
            </div>
          </div>
        </div>
        <div class="operate">
          <span class="btn" @click="submitHandle">提交审核</span>
        </div>
      </div>
    </section>

    <footer></footer>
  </div>
  <script src="js/jquery.min.js"></script>
  <script src="js/slide.min.js"></script>
  <script src="js/polyfill.min.js"></script>
  <script src="js/jquery.nicescroll3.7.6.min.js"></script>
  <script src="js/main.js"></script>
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <script src="https://unpkg.com/qiniu-js@2.4.0/dist/qiniu.min.js"></script>
  <script src="https://webapi.amap.com/maps?v=1.4.15&key=24688df90aef7762942b8f9b94ba2e70&plugin=AMap.Autocomplete,AMap.PlaceSearch"></script>
  <script src="js/request.js"></script>
  <script src="js/getPrepareData.js"></script>
  <script>
    $(function() {
      $("header").load("./enterpriseCommon/header.html");
      $("footer").load("./enterpriseCommon/footer.html");
    })

  </script>
  <script>
    var delList = [];
    var map, auto, placeSearch;

    var rules = {
      name: {
        test: function(val) {
          return val !== ''
        },
        msg: '企业名称必填'
      },
      area_id: {
        test: function(val) {
          return val !== ''
        },
        msg: '企业所在地必须选择'
      },
      address: {
        test: function(val) {
          return val !== ''
        },
        msg: '详细地址必须填写'
      },
      // trade: {
      //   test: function(val) {
      //     return (val[2] || val[1] || val[0]) !== null
      //   },
      //   msg: '所在行业必选'
      // },
      size_id: {
        test: function(id) {
          return id !== ''
        },
        msg: '企业规模必选'
      },
      type_id: {
        test: function(id) {
          return id !== ''
        },
        msg: '企业类型必选'
      },
      // qualificationSrc: {
      //   test: function(src) {
      //     return src !== ''
      //   },
      //   msg: '营业资质必须上传'
      // },
    };
    var vm = new Vue({
      el: "#app",
      data: {
        trade: {
          0: null,
          1: null,
          2: null
        },
        name: '', // 企业名称
        tradeList: [], // 行业列表
        area_id: '', // 所在地id
        areaList: [], // 地址列表
        address: '', // 具体地址
        mapAddress: '',
        type_id: '', // 企业类型id
        typeList: [], // 企业类型选择列表
        size_id: '', // 企业规模id
        sizeList: [], // 企业规模选择列表
        qualificationSrc: '', // 营业资质图片
        EnterpriseImgArr: [],
        desc: ''
      },
      computed: {
        secTradeList: function() {
          var parent = this.trade[0]
          return (parent && parent.children) || []
        },
        thrTradeList: function() {
          var parent = this.trade[1]
          return (parent && parent.children) || []
        }
      },
      created: function() {
        prepare.getQualificationPrepare(this.setPrepare.bind(this));
        // request('enterprise/qualification/store', 'PUT', JSON.stringify({
        //   "name": "麋鹿",
        //   "type_id": 2,
        //   "size_id": 1,
        //   "trade_id": 2,
        //   "area_id": 22,
        //   "address": "角落里",
        //   "desc": "麋鹿公司",
        //   "image": {
        //     "BusinessQualification": [{
        //       "url": "http: //q4rtqrokt.bkt.clouddn.com/FmnkHnR3o2YOWVx3-P0f1N_AOvF4"
        //     }],
        //     "EnterpriseImg": [{
        //         "url": "http://q4rtqrokt.bkt.clouddn.com/FhceI9e2vY2zlekKH9_XcEtymnd7"
        //       },
        //       {
        //         "url": "http://q4rtqrokt.bkt.clouddn.com/FqgVLEs6syo5hJhpXRV7GkucN5zt"
        //       }
        //     ]
        //   }
        // }), function(res) {
        //   console.log('sendSuccess', res);
        //   // localtion.href = './53.html'
        // }, function(err) {
        //   console.log('err', err);
        // })
      },
      mounted: function() {
        var self = this;
        map = new AMap.Map('map-container');
        auto = new AMap.Autocomplete({
          input: 'keyword-input',
          output: 'address-output'
        });

        placeSearch = new AMap.PlaceSearch({
          map: map
        });

        AMap.event.addListener(auto, 'select', function(e) {
          self.mapAddress = e.poi.name;
          placeSearch.setCity(e.poi.adcode);
          placeSearch.search(e.poi.name);
        })

        AMap.event.addListener(placeSearch, 'markerClick', function(e) {
          var data = e.data;
          var name = data.address;
          self.mapAddress = data.name + '(' + data.address + ')';
        })
      },
      filters: {
        imgFilter: function(key) {
          return qiniuUrl + '/' + key
        }
      },
      methods: {
        setPrepare: function(data) {
          this.tradeList = data.trade;
          this.areaList = data.region;
          this.sizeList = data.size;
          this.typeList = data.type;
        },
        setCity: function(res) {
          var selectData = this.$refs.cascader.getCheckedNodes()[0];
          var city = selectData.parent.data.region_name;
          auto.setCity(city)
        },
        saveAddress: function() {
          this.address = this.mapAddress;
        },
        clearTrade: function(arr) {
          for (var i = 0; i < arr.length; i++) {
            this.trade[arr[i]] = null
          }
        },
        checkImg: function(file, fileList) {
          if (file.size > 10 * 1024 * 1024) {
            this.$message('上传图片大小应小于10MB')
            if (fileList) {
              this.$refs.EnterpriseImg.clearFiles()
            }
            return false
          }
          return true
        },
        showLimitOutMsg: function() {
          this.$message.warning('最多只能上传6张图片')
        },
        submitHandle: function() {
          var loading = this.$loading({
            lock: true,
            text: '提交中',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.7)'
          })
          var that = this;
          var isPass = Object.keys(rules).every(function(key) {
            var val = this[key];
            var rule = rules[key];
            var result = rule.test(val);
            if (!result) {
              loading.close();
              this.$message({
                type: 'warning',
                message: rule.msg
              })
            }
            return result
          }, this);
          if (!isPass) return
          var uploadList = this.$refs.EnterpriseImg.uploadFiles;
          var len = uploadList.length;
          var EnterpriseImg = new Array(len);
          if (len && this.EnterpriseImgArr.length != len) {
            var count = 0;

            function cFn(err) {
              count++;
              if (count >= len) {
                this.EnterpriseImgArr = EnterpriseImg;
                this.sendData(loading);
              }
            }
            var completeFn = cFn.bind(this)
            uploadList.forEach(function(uploadItem, index) {
              uploadImg({
                file: uploadItem.raw,
                success: function sFn(res) {
                  EnterpriseImg[index] = {
                    url: res.key
                  }
                },
                complete: completeFn
              })
            })
            return
          }
          this.sendData(loading)
        },
        sendData(loading) {
          var self = this;
          var param = {
            name: this.name,
            type_id: this.type_id,
            size_id: this.size_id,
            trade_id: (this.trade[2] || this.trade[1] || this.trade[0]).id,
            area_id: this.area_id[this.area_id.length - 1],
            address: this.address || (this.address = this.mapAddress),
            desc: this.desc,
            image: {
              BusinessQualification: [{
                url: this.qualificationSrc
              }],
              EnterpriseImg: this.EnterpriseImgArr
            }
          };
          var url = 'enterprise/qualification/store';
          if (headerVm.userInfo) {
            url = 'enterprise/qualification/update';
            param.id = headerVm.userInfo.enterprise_id;
          }
          request(url, 'PUT', JSON.stringify(param), function(res) {
            console.log('sendSuccess', res);
            loading.close()
            location.href = './53.html'
          }, function(err) {

            self.$message.warning(err.responseJSON ? err.responseJSON.message : err)
            loading.close()
          })
        },
        uploadImg: function(e) {
          uploadImg({
            file: e.file,
            success: successFn.bind(this),
            fail: failFn.bind(this)
          })

          function successFn(res) {
            console.log('uploadSuccess', res);
            this.qualificationSrc = res.key
          }

          function failFn(err) {

          }
        }
      }
    });

  </script>
</body>

</html>
